<template>
  <Modal
      :draggable="!$config.mask"
      :mask="$config.mask"
      :mask-closable="!$config.mask"
      :value="value"
      @on-visible-change="visibleChange"
      width="800"
  >
    <p slot="header">
      审计日志详情
    </p>
    <Divider>用户信息</Divider>
    <Row :gutter="10">
      <Col class="key" span="4">用户名：</Col>
      <Col class="value" span="20">{{ modalData.userName }}</Col>
    </Row>
    <Row :gutter="10">
      <Col class="key" span="4">IP地址：</Col>
      <Col class="value" span="20">{{ modalData.clientIpAddress }}</Col>
    </Row>
    <Row :gutter="10">
      <Col class="key" span="4">客户端：</Col>
      <Col class="value" span="20">{{ modalData.clientName }}</Col>
    </Row>
    <Row :gutter="10">
      <Col class="key" span="4">浏览器：</Col>
      <Col class="value" span="20">{{ modalData.browserInfo }}</Col>
    </Row>
    <Divider>操作信息</Divider>
    <Row :gutter="10">
      <Col class="key" span="4">服务：</Col>
      <Col class="value" span="20">{{ modalData.serviceName }}</Col>
    </Row>
    <Row :gutter="10">
      <Col class="key" span="4">操作：</Col>
      <Col class="value" span="20">{{ modalData.methodName }}</Col>
    </Row>
    <Row :gutter="10">
      <Col class="key" span="4">时间：</Col>
      <Col class="value" span="20">{{ modalData.executionTime }}</Col>
    </Row>
    <Row :gutter="10">
      <Col class="key" span="4">持续时间：</Col>
      <Col class="value" span="20">{{ modalData.executionDuration }}ms</Col>
    </Row>
    <Row :gutter="10">
      <Col class="key" span="4">参数：</Col>
      <Col class="value" span="20">
        <div style="width:100%;border:1px solid #e8eaec;background-color:#f8f8f9;padding:2px;overflow:auto;">
          <pre lang="js">{{ getFormattedParameters(modalData.parameters) }}</pre>
        </div>
      </Col>
    </Row>
    <Divider>自定义数据</Divider>
    <Row :gutter="10">
      <Col class="value" span="24">
        <template v-if="!modalData.customData">
          <div style="margin-left:40px;">无</div>
        </template>
        <template v-else>
          <div
              style="width:100%;height:120px;border:1px solid #e8eaec;background-color:#f8f8f9;padding:2px;overflow:auto;">
            <pre>{{ modalData.customData }}</pre>
          </div>
        </template>
      </Col>
    </Row>
    <Divider>执行状态</Divider>
    <Row :gutter="10">
      <Col class="value" span="24">
        <template v-if="!modalData.exception">
          <div style="margin-left:40px;">
            <Icon :color="$config.color.success" type="md-checkmark-circle"></Icon>
            成功
          </div>
        </template>
        <template v-else>
          <div style="margin-left:40px;margin-bottom:10px;">
            <Icon :color="$config.color.error" type="md-close-circle"></Icon>
            失败
          </div>
          <div style="width:100%;border:1px solid #e8eaec;background-color:#f8f8f9;padding:2px;overflow:auto;">
            <pre>{{ modalData.exception }}</pre>
          </div>
        </template>
      </Col>
    </Row>
    <div slot="footer">
      <Button icon="md-close" @click="cancel">关闭</Button>
    </div>
  </Modal>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';

import Util from '@/lib/util';

@Component({
  components: {},
})
export default class AuditModal extends AbpBase {
  name: string = 'AuditModal';

  @Prop({type: Boolean, default: false}) value: boolean;
  @Prop({type: Object}) modalData: any;

  cancel() {
    this.$emit('input', false);
  }

  visibleChange(value: boolean) {
    if (!value) {
      this.$emit('input', value);
    }
  }

  getFormattedParameters(parameters) {
    try {
      var json = JSON.parse(parameters);
      return JSON.stringify(json, null, 4);
    } catch (e) {
      return parameters;
    }
  }
}
</script>

<style lang="less" scoped>
.key {
  text-align: right;
  font-weight: bolder;
}

.value {
  text-align: left;
}
</style>
